// 柱状图模块1
(function () {
  // 1实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  myChart.option = {}
  myChart.showLoading();
  $.ajax({
    url: 'http://127.0.0.1:5000/data',
    result: {},
    type: 'GET',
    success: function (result) {
      console.log(result)
      // college_sum = result.college_sum;
      // students = result.students;
      str = '<li>' + result.college_sum + '</li> ' + '<li>' + result.students + '</li> '
      $("#sum").append(str)
      myChart.hideLoading();
      // 填入数据2
      myChart.setOption({
        color: ["#2f89cf"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // 修改图表的大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: result.province,
            axisTick: {
              alignWithLabel: true
            },
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: "8"
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            // 修改刻度标签 相关样式
            axisLabel: {
              color: "rgba(255,255,255,.6) ",
              fontSize: 12
            },
            // y轴的线条改为了 2像素
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)"
              }
            }
          }
        ],
        series: [
          {
            name: "学院：",
            type: "bar",
            barWidth: "35%",
            // data: [200, 300, 300, 900, 1500, 1200, 600],
            data: result.colleges,
            itemStyle: {
              // 修改柱子圆角
              barBorderRadius: 5
            }
          }
        ]
      })
    },
    error: function (msg) {
      console.log(msg);
      alert('系统发生错误');
    }
  })
  // 2. 指定配置项和数据
  // 3. 把配置项给实例对象
  // myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();
// 柱状图2
(function () {
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"));
  // 2. 指定配置和数据
  myChart.option = {}
  myChart.showLoading();

  $.ajax({
    url: 'http://127.0.0.1:5000/mathEnglish',
    result: {},
    type: 'GET',
    success: function (result) {
      myChart.hideLoading();
      // 填入数据2
      myChart.setOption({
        grid: {
          top: "10%",
          left: "22%",
          bottom: "10%"
          // containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
          show: false
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            data: result.labels,
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          },
          {
            data: result.nums,
            inverse: true,
            // 不显示y轴的线
            axisLine: {
              show: false
            },
            // 不显示刻度
            axisTick: {
              show: false
            },
            // 把刻度标签里面的文字颜色设置为白色
            axisLabel: {
              color: "#fff"
            }
          }
        ],
        series: [
          {
            name: "条",
            type: "bar",
            data: result.aver,
            yAxisIndex: 0,
            // 修改第一组柱子的圆角
            itemStyle: {
              barBorderRadius: 20,
              // 此时的color 可以修改柱子的颜色
              color: function (params) {
                // params 传进来的是柱子对象
                // console.log(params);
                // dataIndex 是当前柱子的索引号
                return myColor[params.dataIndex];
              }
            },
            // 柱子之间的距离
            barCategoryGap: 50,
            //柱子的宽度
            barWidth: 10,
            // 显示柱子内的文字
            label: {
              show: true,
              position: "inside",
              // {c} 会自动的解析为 数据  data里面的数据
              formatter: "{c}%"
            }
          },
          {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [100, 100, 100, 100],
            itemStyle: {
              color: "none",
              borderColor: "#00c1de",
              borderWidth: 3,
              barBorderRadius: 15
            }
          }
        ]
      })
    },
    error: function (msg) {
      console.log(msg);
      alert('系统发生错误');
    }
  })
  // 3. 把配置给实例对象
  // myChart.setOption(option);
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 饼形图2 地区分布模块
(function () {
  var myChart = echarts.init(document.querySelector(".pie2 .chart"));
  myChart.option = {}
  myChart.showLoading();
  $.ajax({
    url: 'http://127.0.0.1:5000/proStu',
    result: {},
    type: 'GET',
    success: function (result) {
      // console.log(key_value)
      myChart.hideLoading();
      // 填入数据2
      myChart.setOption({
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff"
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          bottom: "0%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12"
          }
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            // 图形的文字标签
            label: {
              fontSize: 10
            },
            // 链接图形和文字的线条
            labelLine: {
              // length 链接图形的线条
              length: 6,
              // length2 链接文字的线条
              length2: 8
            },
            // data: [{ 'value': 8846, 'name': '上海市' }, { 'value': 5627, 'name': '江苏省' }, { 'value': 4833, 'name': '北京市' }, { 'value': 4546, 'name': '浙江省' }, { 'value': 4235, 'name': '辽宁省' }, { 'value': 4174, 'name': '陕西省' }, { 'value': 3577, 'name': '重庆市' }, { 'value': 3178, 'name': '湖北省' }]
            data: result.key_value
          }
        ]
      })
    },
    error: function (msg) {
      console.log(msg);
      alert('系统发生错误');
    }
  })
  // myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();

// 学院分布地图模块
(function () {
  var myChart = echarts.init(document.querySelector(".map .chart"));
  myChart.showLoading();
  $.ajax({
    url: 'http://127.0.0.1:5000/map',
    result: {},
    type: 'GET',
    success: function (result) {
      // 填入数据2
      myChart.hideLoading();
      // console.log(result.key_value)
      console.log(result.list_all)
      var geoCoordMap = result.key_value
      // var XAData = [
      //   [{ 'name': "学校" }, { 'name': "上海电力大学" }],
      //   [{ 'name': "学校" }, { 'name': "三峡大学" }],
      // ]
      var XAData = result.list_all
      var color = ["#a6c84c", "#ffa022", "#46bee9"]; //航线的颜色
      var series = [];
      [
        ['学校', XAData],
      ].forEach(function (item, i) {
        series.push(
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}"
              }
            },
            symbolSize: 30 / 8,
            itemStyle: {
              normal: {
                color: color[i]
              },
              emphasis: {
                areaColor: "#2B91B7"
              }
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name]
              };
            })
          },
        );

      });

      var option = {
        legend: {
          orient: "vertical",
          top: "bottom",
          left: "right",
          textStyle: {
            color: "#fff"
          },
          selectedMode: "multiple"
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: true,
              color: "#fff"
            }
          },
          // 把中国地图放大了1.2倍
          zoom: 3,
          roam: true,
          itemStyle: {
            normal: {
              // 地图省份的背景颜色
              areaColor: "rgba(20, 41, 87,0.6)",
              borderColor: "#195BB9",
              borderWidth: 1
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        series: series
      }
      // console.log(result.keywords)
      myChart.setOption(option)
    }, error: function (msg) {
      console.log(msg);
      alert('系统发生错误');
    }
  })
  // myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function () {
    myChart.resize();
  });
})();